<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.testBaseId" placeholder="请选择基地">
              <el-option v-for="list in options" :label="list.NAME" :value="list.ID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入实训室名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button type="primary" size="mini" @click="dialogFormVisible = true">新增建筑</el-button>
        <el-button :disabled="newDisabled" type="primary" size="mini" @click="addRoom">新增教室</el-button>
        <el-button :disabled="editDisabled" type="primary" size="mini" @click="editBuild">编辑</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-tree accordion highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20" v-show="tableShow">
        <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="NAME"
            width="240px"
            label="实训室名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="TESTBASENAME"
            label="基地名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="USERNAME"
            label="负责人">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="PHONE"
                  label="联系方式">
          </el-table-column>
          <el-table-column
            align="center"
            prop="STATUS"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180px"
            prop="CREATETIME"
            label="创建时间">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
      <el-col :span="20" v-show="!tableShow">
        <el-table
                :data="istableData"
                border
                size="mini"
                style="width: 100%">
          <el-table-column
                  align="center"
                  prop="NAME"
                  width="240px"
                  label="实训室名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="TESTBASENAME"
                  label="基地名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="FLOOR"
                  label="楼层">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="SERVEMAJOR"
                  label="服务专业">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="SERVECOURSE"
                  label="服务课程">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="BUILTAREA"
                  label="建筑面积">
            <template slot-scope="scope">
              {{Number(scope.row.BUILTAREA).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="USABLEAREA"
                  label="使用面积">
            <template slot-scope="scope">
              {{Number(scope.row.USABLEAREA).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="USERNAME"
                  label="负责人">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="PHONE"
                  label="联系方式">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="STATUS"
                  label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="建筑信息" :visible.sync="dialogFormVisible" center width="30%">
      <el-form :model="form" label-width="80px">
        <el-row>
          <el-col>
            <el-form-item label="建筑名称">
              <el-input size="mini" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addBuild">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="教室信息" :visible.sync="dialogFormVisible2" center width="30%">
      <el-form :model="form2" label-width="80px">
        <el-row>
          <el-col>
            <el-form-item label="所属建筑">
              <el-input disabled size="mini" v-model="form2.buildName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="教室名称">
              <el-input size="mini" v-model="form2.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="newAddRoom">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "building",
    data() {
      return{
        data: [],
        defaultProps: {
          children: 'list',
          label: 'NAME'
        },
        pagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        dialogImageUrl: '',
        dialogVisible: false,
        form: {
          name: ''
        },
        form2:{
          name: ''
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogFormVisible2: false,
        formInline: {},
        tableData: [],
        options: [],
        newDisabled: true,
        editDisabled: true,
        node: {},
        isEdit: false,
        buildingId: '',
        classroomId: '',
        floorId: '',
        tableShow: true,
        istableData: []
      }
    },
    created() {
      this.getData();
      this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
      this.$post('/testBase/findTestBase').then(res => {
        this.options = res.data.data.dataList;
      })
    },
    methods: {
      getData() {
        this.$post('/public/findStructureByTest').then(res => {
          this.data = res.data.data;
        })
      },
      getRoom() {
        this.$post('/testBase/findTest', {
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          buildingId: this.buildingId,
          floor: this.floorId,
          classroomId: this.classroomId
        }).then(res => {
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      search() {
        this.$post('/testBase/findTest', {
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          name: this.formInline.name,
          testBaseId: this.formInline.testBaseId,
          status: this.formInline.status
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('条件输入错误，请检查');
            return;
          }
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      getTableData(pageSize, pageNo) {
        this.$post('/testBase/findTest', {pageSize,pageNo}).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      //添加建筑
      addBuild() {
        let url = '';
        if(this.isEdit) {
          url = '/building/update';
          this.form.id = this.node.data.ID;
        } else {
          url = '/building/add'
        }
        this.$post(url, this.form).then(res => {
          if(res.data.status === 1) {
            this.$message.success('添加成功');
            this.isEdit = false;
            this.getData();
            this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
            this.dialogFormVisible = false;
          } else {
            this.$message.error(res.data.msg)
          }
        });
      },
      addRoom() {
        this.form2.buildName = this.node.data.NAME;
        this.form2.buildingId = this.node.data.ID;
        this.dialogFormVisible2 = true
      },
      newAddRoom() {
        let url= '';
        if(this.isEdit) {
          url = '/building/updateClassroom';
          this.form2.id = this.node.data.ID;
        }else {
          url = '/building/addClassroom'
        }
        this.$post(url, this.form2).then(res => {
          if(res.data.status === 1) {
            this.$message.success('添加成功');
            this.isEdit = false;
            this.getData();
            this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
            this.dialogFormVisible2 = false;
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      editBuild() {
        this.isEdit = true;
        if(this.node.level === 1) {
          this.form.name = this.node.data.NAME;
          this.dialogFormVisible = true;
        } else if(this.node.level === 3) {
          this.form2.buildName = this.node.parent.data.NAME;
          this.form2.name = this.node.data.NAME;
          this.dialogFormVisible2 = true
        }
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length > 0) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getTableData(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getTableData(this.pagination.pageSize, page);
      },
      handleNodeClick(data, node) {
        this.node = node;
        console.log(node)
        if(node.level === 1 || node.level === 3) {
          this.editDisabled = false
        } else {
          this.editDisabled = true;
        }
        if(node.level === 1) {
          this.buildingId = data.ID;
          this.classroomId = '';
          this.floorId = '';
          this.getRoom();
        }
        if(node.level === 2) {
          this.floorId = data.ID;
          this.classroomId = '';
          this.getRoom();
          this.newDisabled = false;
        } else {
          this.newDisabled = true;
        }
        if(node.level === 3) {
          this.classroomId = data.ID;
          this.tableShow = false;
          this.$post('/testBase/findTestByClassroomId', {classroomId: data.ID}).then(res => {
            console.log(res)
            this.istableData = res.data.data.dataList;
          })
        }else {
          this.tableShow = true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
